import React, { useEffect, useState, useRef } from 'react'
import { Row, Col, Form, Input, Button, Modal, Typography, Select, Table, Tag, Space, Popconfirm } from "antd"
import "./skin.scss"
import "../home/home"


import ReactDOM from 'react-dom';


const { Title } = Typography



export default function SkinSwitch(props: any) {
    let textInput: any = null

    // render(){
    //     const {
    //         chanehuan()
    // } = this.props
    var a: any =
    {
        zise: "linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)",
        lanse: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)",
        fense: "linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%)"
    }




    const Clickcolor = () => {

        var el = document.querySelector('.back') as HTMLElement
        // el.style.setProperty("background", "linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)")

        el.style.background = a.zise
        localStorage.clear()
        localStorage.setItem("zise", a.zise)

        console.log(a.zise);

    }
    const Clickcolor1 = () => {
        var el = document.querySelector('.back') as HTMLElement

        el.style.background = a.lanse
        localStorage.clear()
        localStorage.setItem("lanse", a.lanse)
    }
    const Clickcolor2 = () => {
        var el = document.querySelector('.back') as HTMLElement
        el.style.background = a.fense
        localStorage.clear()
        localStorage.setItem("fense", a.fense)
    }




    return (


        <div style={{ height: "100%" }}>
            <Title level={2}>皮肤切换</Title>
            <div className='gradient'>
                <div
                    className="gradient__background js-gradient js-see-view-full"
                    style={{ backgroundImage: "linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)" }}
                    ref={e => (textInput = e)}
                    onClick={Clickcolor}
                >
                </div>
            </div>
            <div className='gradient'>
                <div className="gradient__background js-gradient js-see-view-full"
                    style={{ backgroundImage: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)" }}
                    onClick={Clickcolor1}
                >
                </div>
            </div>
            <div className='gradient'>
                <div className="gradient__background js-gradient js-see-view-full"
                    style={{ backgroundImage: "linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%)" }}
                    onClick={Clickcolor2}
                >
                </div>
            </div>


        </div >
    )
}
